<template>
	<view id="page_info" x>
		<view class="op_info">
			<view class="op_icon">
				<u-icon size="120" label-size="50" label-color="rgba(255, 255, 255, 1)" margin-left="40"
					color="rgba(255, 255, 255, 1)" :label="pageid==1?'待签字':(pageid==2?'已签字':(pageid==3?'拒绝交易':'交易成功'))"
					:name="pageid==1?'heart':(pageid==2?'eye':(pageid==3?'email':'download'))"></u-icon>
			</view>
			<!-- 			<view class=" op_change" @click="show_popup()" v-if="pageid>1">
				{{showpopup?'完成':'管理'}}
			</view> -->
			<view>
				<view class="list_info">
					<view class="list_top"></view>
					<view class="order_card" v-for="(orderitem,orderindex) in order_list"  :index="orderindex" :key="orderitem.id">
						<view class="choose_icon">
							<u-icon v-if="showpopup  && pageid >1" name="checkmark-circle" size="46" margin-left="20"
								:style="{'color' :(chooseall?'rgba(255, 87, 51, 1)':'rgba(112, 112, 112, 1)')}">
							</u-icon>
						</view>
						<view class="goods_image">
							<image :src="orderitem.image">
							</image>
						</view>
						<view class="goods_text">
							<view class="goods_title">
								<view class="goods_name">{{orderitem.name}}
								</view>
							</view>
							<view class="goods_details">
								<view>品种：{{orderitem.residue}}</view>
								<view>重量：{{orderitem.region}}kg</view>
								<view>下单日期：{{orderitem.date}}</view>
							</view>
							<view class="button_box" v-if="pageid==1">
								<u-modal v-model="show" @confirm="confirm" @cancel="cancel" :content="content" :show-cancel-button = "true"></u-modal>
								<button class="publish_button" @click="open(orderitem.id)">拒绝</button>
								<button class="publish_button1" @click="placeorder(orderitem.id)">签字</button>
							</view>

							<view class="button_box1" v-if="pageid>1">
								<!-- <button class="publish_button"
										@click="goto('../../subpages/Details/product_details')">拒绝</button> -->
								<button class="publish_button2"
									@click="goto('../../subpages/Details/product_details')">删除</button>
							</view>
						</view>
					</view>
					<view class="bottom_box" v-if="showpopup && pageid >1">
						<view class="allchoose_icon">
							<u-icon name="checkmark-circle" label="全选" size="46" margin-left="20" @click="allchoose()"
								:style="{'color' :(chooseall?'rgba(255, 87, 51, 1)':'rgba(112, 112, 112, 1)')}">
							</u-icon>
						</view>
						<!-- <view class="bottom_button" v-if="pageid==3">
							<button class="publish_button"
								@click="goto('../../subpages/Details/product_details')">拒绝</button>
							<button class="publish_button1"
								@click="goto('../../subpages/Details/product_details')">签字</button>
						</view> -->
						<view class="bottom_button" v-if="pageid>1">
							<!-- <button class="publish_button"
									@click="goto('../../subpages/Details/product_details')">拒绝</button> -->
							<button class="publish_button2"
								@click="goto('../../subpages/Details/product_details')">删除</button>
						</view>
					</view>
					<!-- 					<u-divider color="#878787" bg-color="rgba(255, 255, 255, 1)" margin-top="10" margin-bottom="10">到底了
					</u-divider> -->
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
		<!-- 签字弹窗 -->
		<u-popup v-model="showpopup1" mode="center" class="popupsign" :mask-close-able="false" :closeable="true">
			<sign @closepopup="closepopup" @returnsign="getsign"></sign>
		</u-popup>
	</view>
</template>
<script>
	import sign from '../../components/sign/signwx.vue';
	import {
		pathToBase64
	} from '../../../js_sdk/mmmm-image-tools/index.js'
	export default {
		components: {
			sign
		},
		data() {
			return {
				//页面状态
				pageid: 1,
				//点击事件参数
				chooseall: false,
				show:false,
				content:'你确定要拒绝该订单吗？',
				showpopup: false,
				showpopup1: false,
				scrollTop: 0,
				pageNumber: 0,
				signBs: '',
				id: '',
				order_list: [],
			}
		},
		methods: {
			//弹窗
			open(id) {
				this.id = id;
				this.show = true;
			},
			confirm(index,index1) {
				console.log(index);
				let uuid = this.id
				this.refuseOrder(uuid).then(res=>{
					if (res.data.code == 200 ){
						this.order_list.splice(index, 1);
						this.show = false;
					}
				})
			},
			cancel() {
				this.show = false;
			},
			//页面跳转
			goto(url) {
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
			async getsign(signdata) { //得到签名后提交订单
				await pathToBase64(signdata).then(bs => {
					this.signBs = bs;
				})
				let data = {
					'orderId': this.id,
					'base64': this.signBs
				};
				console.log(data)
				this.$myRequest({
					url: '/contractOrder/signB',
					method: 'post',
					json: 'json',
					data: data,
				}).then((res) => {
					console.log(res)
					if (res.data.code === 200) {
						setTimeout(() => {
							this.goto('../operatesuccess/operatesuccess');
						}, 1000)
					}
				})
			},
			refuseOrder(uuid) {
				let iurl = '/contractOrder/sellerCancelOrder';
				let data = {
					orderUUId: uuid,
				};
				return this.$myRequest({
					url: iurl,
					method: 'POST',
					data: data,
				})
			},
			async getData() {
				const res = await this.$myRequest({
					url: '/contractOrder/sellerGetOrderPageByStatus',
					method: 'POST',
					data: {
						'pageNum': this.pageNumber,
						'pageSize': 10,
						'oStatus': this.pageid,
					}
				}).then((res) => {
					if (res.data.code == 200) {
						res.data.data.records.filter(item => {
							this.order_list.push({
								'id': item['orderUuid'],
								'image': item['goodsMainImgUrl'],
								'name': item['goodsType'],
								'residue': item['goodsVarieties'],
								'region': item['orderKilogram'],
								'date': item['orderCreateTime']
							})
						})
						this.pageNumber++;
					}
				});

			},
			allchoose() { //点击选择
				this.chooseall = !this.chooseall;
			},
			show_popup() {
				this.showpopup = !this.showpopup;
			},
			placeorder(id) { //验证规则
				this.id = id;
				this.showpopup1 = !this.showpopup1;
			},
			closepopup(value) { //关闭弹出层
				this.showpopup = false;
			}
		},
		onLoad(option) {
			if (option.pageid) {
				this.pageid = option.pageid;
				// console.log(option.pageid);
			}
			this.getData()
		},
		onReachBottom() { //到达底部
			this.getData();
		},
		// returnsign(value) {
		// 	console.log(value);
		// }
		onPageScroll(e) { //生命周期函数
			this.scrollTop = e.scrollTop
		}
	}
</script>
<style>
	@import url("order_processing.css");
</style>
